<!--
 * @Date: 2020-08-08 14:08:24
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-08-08 16:14:45
 * @Description: 基础的popup
-->
<template>
  <div
    :class="[currAttrs.tag == 'yjtdJYDW' ? '' : 'base-popup-content']"
    :style="currStyle"
    v-if="show"
  >
    <component
      :is="currCom"
      v-bind="currAttrs"
      :maptype="maptype"
      :attr="currAttrs"
      @closePop="close"
      @showlist2="showlist2"
      @dclose="closepopup"
    ></component>
  </div>
</template>
<script>
import basePopup from './testPopup'
import yjzyAZD from './yjzyAZD' // 安置点
import yjzyJYDW from './yjzyJYDW' // 救援队伍
import yjzyWZD from './yjzyWZD' // 物资点
import yjzyXZJD from './yjzyXZJD' // 负责人联络点-乡镇街道
import popup from './pop_up' // 设置受灾点
import yjtdJYDW from './rescue_team_detail'
import popbzd from './bzd_detail'
import popwzd from './wzd_detail'

// basePopup的参考
const popupRefer = {
  yjzyAZD,
  yjzyJYDW,
  yjzyWZD,
  yjzyXZJD,
  popup,
  popbzd,
  popwzd,
  yjtdJYDW,
  default: basePopup
}
// components: { popup, basePopup },
export default {
  props: {
    type: {
      type: Number
    },
    maptype: {
      type: Number
    }
  },
  data () {
    return {
      top: 0,
      left: 0,
      show: false,
      currTag: '',
      currAttrs: {}
    }
  },
  computed: {
    currStyle () {
      if (!this.show) {
        return {
          display: 'none'
        }
      } else {
        // 382 是popup的长宽 50是图标的长宽
        return {
          display: 'block',
          top: this.top - 200 - 100 + 'px',
          // left: (this.left - 300) + 'px'
          left: this.left - 400 - 20 + 'px'
        }
      }
    },
    currCom () {
      const com = popupRefer[this.currTag]
      // console.log(com)
      if (com) {
        return com
      } else {
        return popupRefer.default
      }
    }
  },
  methods: {
    close () {
      this.show = false
    },
    // 打开的
    open (point, attrs) {
      console.log(attrs)
      this.top = point.y
      this.left = point.x
      this.show = true
      this.currTag = attrs.tag
      this.currAttrs = attrs
      if (this.currAttrs.picturePath) {
        this.currAttrs.urls = this.currAttrs.picturePath.split(',')
      }
    },
    update (point) {
      this.top = point.y
      this.left = point.x
    },
    showlist2 (obj) {
      this.$emit('showlist', obj)
    },
    closepopup (data, obj) {
      if (data === 1) {
        this.close()
      } else {
        this.$emit('dclose', obj)
        this.close()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.base-popup-content {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 350px;
  z-index: 999;
  // background: #273022;
}
</style>
